<template>
    <!-- 评分分类 -->
    <div class="creditcard" v-if="boolobox">
      <div class="top_bar">
        <div class="left">
          <!-- 搜索框 -->
          <el-input
            v-model="input4"
            class="w-50 m-2"
            placeholder="请输入要查询的评分分类名称"
          >
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
          <el-button type="primary" class="zhuangtai btn">查询</el-button>
          <el-button class="zhuangtai btn btn1">重置</el-button>
        </div>
        <div class="right" @click="dialogFormVisible = true">
          <el-button class="zhuangtai btn btn1" @click="addbtn"
            ><el-icon><Plus /></el-icon>新增</el-button
          >
        </div>
      </div>
  
      <!-- 表格 -->
      <el-table :data="tableData" stripe style="width: 100%" highlight-current-row>
          <el-table-column prop="序号" label="序号" width="180" >
           <!-- 组件插槽 -->
           <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
      </el-table-column>
        <el-table-column prop="name" label="评分类型名称" width="180" />
        <el-table-column prop="state"  label="关联评分卡" />
        <el-table-column prop="fenzhi" label="关联评分等级" />
        <el-table-column prop="caozuo" label="操作" >
          <template #default="scope">
           <!-- <el-button type="danger" @click="handleDelete(scope.row.adminid)">Delete</el-button> -->
           <div class="iconbtn">
            <el-icon ><Edit /></el-icon>
           <el-icon ><View /></el-icon>
           <el-icon ><Delete /></el-icon>
        
           </div>
          
        </template>
  
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[10, 20, 30, 40]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 新增按钮弹窗 -->
    <div class="newdom" v-else>
      <h1>还款登记</h1>
      <div class="adddominput">
        <div class="left">
          <span>*评分等级名称</span>
          <el-input v-model="input" placeholder="请输入内容" class="input" />
        </div>
        <div class="right">
          <el-button @click="addbtn" class="addbtn"
            ><el-icon><Plus /></el-icon>新增分值区间</el-button
          >
        </div>
      </div>
      <!-- 表格 -->
     <el-table :data="tableData" stripe style="width: 100%" @click="asd">
      <el-table-column prop="序号" label="序号" width="180" >
          
           <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
      </el-table-column>    
      <el-table-column prop="name" label="评分卡名称" width="180" />
      <el-table-column prop="state" label="状态" />
      <el-table-column prop="fenzhi" label="分值" />
      <el-table-column prop="caozuo" label="操作" />
    </el-table>
    <div class="bottom_btn">
      <el-button type="primary"  @click="nextbtn" plain>返回</el-button>
      <el-button type="primary">完成</el-button>
    </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from "vue";
  
  /* 新增弹出对话框 */
  var boolobox = ref(true);
  var addbtn = () => {
    boolobox.value = false;
  };
  
  // 表格内容

  const tableData = [
    {
    
      name: "信用贷款",
      state: "评分卡1",
      fenzhi: "A",
    
    },
    {
    
      name: "信抵押款",
      state: "评分卡3",
      fenzhi: "B",
  
    },
    {
  
      name: "贸易融资贷款",
      state: "评分卡3",
      fenzhi: "C",

    }
  ];
  
  //鼠标滑过表格触发
  // var enter = (data) => {
  //   for (var i = 0; i < tableData; i++) {
  //     caozuo.value = "aaa";
  //   }
  //   console.log(tableData);
  // };
  // var leave = (row) => {
  //   caozuo.value = "XXX";
  // };
  // 分页内容
  var currentPage4 = ref(1);
  var pageSize4 = ref(10);
  
  // 新增页返回按钮
  var nextbtn=()=>{
      boolobox.value = true;
  }
  </script>
  
  
  <style scoped lang="scss">
  .creditcard {
    width: 100%;
    height: 100%;
  }
  /* 顶部功能样式 */
  .top_bar {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      width: 40%;
      height: 40px;
      justify-content: space-between;
    }
    .m-2 {
      width: 286px;
      height: 40px;
    }
    .zhuangtai {
      /* margin-left: -20px; */
      height: 100%;
    }
    .btn {
      width: 100px;
    }
    .btn1 {
      color: #4aa5fe;
      border-color: #4aa5fe;
    }
  }
  
  /* 表格样式 */
  .is-scrolling-none {
    margin-top: 30px;
  }
  .iconbtn{
  width: 200px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  line-height: 32px;
  cursor: pointer;
}
  /* 分页样式 */
  .el-pagination {
    margin-top: 20px;
    position: absolute;
    left: 50%;
    transform: translate(-33%, 50%);
  }
  .el-dialog {
    height: 600px;
  }
  /* 新增弹窗 */
  .newdom {
    position: relative;
    z-index: 99;
    width: 100%;
    height: 100%;
    background-color: rgb(253, 252, 252);
    .adddominput {
      display: flex;
      justify-content: space-between;
      padding: 30px;
      height: 30px;
      .left {
        display: flex;
        span {
          color: #333333;
          font-size: 14px;
          min-width: 120px;
          line-height: 30px;
        }
        .input {
          min-width: 250px;
        }
      }
      .right {
        .addbtn {
          color: #4aa5fe;
          border-color: #4aa5fe;
        }
      }
  }
  .bottom_btn{
      // display: flex;
      position: absolute;
      right: 100px;
      bottom: 10px;
  }
  }
  </style>